<template>
	<view class="pages">
		<view class="top">
			<view class="avator">
				<!-- <image class="nulls" src="https://pw.qyang.cc/static/nullimg.png" mode="scaleToFill" /> -->
				<image class="toux" :src="rq.imgUrl(user.avatar)" mode="scaleToFill" />
				<p>{{user.nickname}}</p>
			</view>
			<view class="info">
				<view class="lef">
					<p>邀请人数</p>
					<text>{{user.invite_num}}</text>
				</view>
				<view class="rig">
					<p>累积获得佣金</p>
					<text>{{user.commission}}</text>
				</view>
				<view @click="golevel()" class="why" style="
            color: #333;
            background: #ffffff;
            border-radius: 50%;
            width: 36rpx;
            height: 36rpx;
			line-height: 36rpx;
          ">?</view>
			</view>
			<view class="tg" @click="gojump()">
				<view class="padd">
					<text>立即推广</text>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="tabs-1">
				<view v-for="(item, index) in tablist" :key="index" class="tabs-2 flex"
					:class="{ active: isSelected === item.id }" @click="selectTab(item.id)">
					<view>{{ item.name }}</view>
					<view :class="isSelected === item.id?'tabs-1_xian':''"></view>
				</view>
			</view>
			<u-tabs @click="clickService" v-if="isSelected == 1" :list="tablist1"  lineWidth="30" lineColor="transparent"
				keyName="name" :activeStyle="{
		  backgroundColor: '#ff7883',
		  padding:'3px 13px',
          color: '#fff',
          borderRadius: '30px',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding:0 40rpx; height: 34px;">
			</u-tabs>
			<u-tabs @click="clickActivity" v-if="isSelected == 2" :list="tablist2" lineWidth="30" lineColor="transparent"
				keyName="name" :activeStyle="{
		  backgroundColor: '#ff7883',
		  padding:'3px 13px',
          color: '#fff',
          borderRadius: '30px',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding:0 40rpx; height: 34px;">
			</u-tabs>
		</view>
		<view v-if="isSelected == 1" class="invitation" v-for="item,index in inviteList" :key="index">
			<view class="cons">
				<view class="yq">
					<view class="avator">
						<image :src="rq.imgUrl(item.avatar)" mode="scaleToFill" />
					</view>
					<view class="rig">
						<view class="top">
							<text>{{item.nickname}}</text>
							<view class="level" v-if="item.is_real">
								<image src="https://pw.qyang.cc/static/svg/icon-realname.svg" mode="scaleToFill" />
							</view>
							<view class="sex">
								<image :src="
                    item.gender === 1
                      ? 'https://pw.qyang.cc/static/sexW.png'
                      : 'https://pw.qyang.cc/static/sexM.png'
                  " mode="scaleToFill" />
								<text>{{item.age?item.age:''}}</text>
							</view>
						</view>
						<p style="color: #999999; font-size: 26rpx; margin: 15rpx 0">
							加入时间：{{item.createtime}}
						</p>
					</view>
				</view>
				<view class="total" style="text-align: end">
					<p style="color: #999999; font-size: 26rpx">累计为您返佣</p>
					<text style="color: #ff7681; font-size: 26rpx">￥{{item.commission}}</text>
				</view>
			</view>
			<view class="bots">
				<view class="lft">
					<p>用户</p>
					<text>￥{{item.user}}</text>
				</view>
				<view class="rgs">
					<p>达人</p>
					<text>￥{{item.daren}}</text>
				</view>
			</view>
		</view>
		<view v-if="isSelected == 2" class="invitation1">
			<view class="dis" v-for="item in orderList" :key="item.id">
				<view class="zuo">
					<view class="cons" v-if="item.daren&&item.daren.id">
						<view class="avator">
							<image src="https://pw.qyang.cc/static/avator.png" mode="scaleToFill" />
						</view>
						<view class="rig">
							<view class="top">
								<text>{{ item.daren.nickname }}</text>
								<view class="level" @click="golevel()" v-if="item.daren.vip">
									<image :src="rq.imgUrl(item.daren.vip)" mode="scaleToFill" />
								</view>
								<view class="sex">
									<image :src="
                      item.daren.gender == '1'
                        ? 'https://pw.qyang.cc/static/sexW.png'
                        : 'https://pw.qyang.cc/static/sexM.png'
                    " mode="scaleToFill" />
									<text>{{ item.daren.age }}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="cons" v-if="item.user&&item.user.id" style="margin-top: 20rpx;">
						<view class="avator">
							<image :src="rq.imgUrl(item.user.avatar)" mode="scaleToFill" />
						</view>
						<view class="rig">
							<view class="top">
								<text>{{ item.user.nickname }}</text>
								<view class="level" @click="golevel()" v-if="item.user.vip">
									<image :src="rq.imgUrl(item.user.vip)" mode="scaleToFill" />
								</view>
								<view class="sex">
									<image :src="
					  item.user.gender == '1'
					    ? 'https://pw.qyang.cc/static/sexW.png'
					    : 'https://pw.qyang.cc/static/sexM.png'
					" mode="scaleToFill" />
									<text>{{ item.user.age }}</text>
								</view>
							</view>
						</view>
					</view>
					<p>{{ item.service }}</p>
					<p>订单编号：{{ item.order_no }}</p>
					<p>下单时间：{{ item.createtime }}</p>
					<p v-if="item.accountedTime">入账时间：{{ item.accountedTime }}</p>
				</view>
				
				<view class="you">
					<view v-if="item.daren&&item.daren.id">
						<view class="user">
							<text>返佣{{item.daren?item.daren.dividend:'0'}}%</text>
							<p class="influencer-text">
								达人
							</p>
						</view>
						<view class="gets">
							<text>{{ item.group }}</text>
							<p>￥{{ item.daren?item.daren.money:'' }}</p>
						</view>
					</view>
					<view v-if="item.user&&item.user.id">
						<view class="user">
							<text>返佣{{item.user?item.user.dividend:'0'}}%</text>
							<p class="user-text">
								用户
							</p>
						</view>
						<view class="gets">
							<text>{{ item.group }}</text>
							<p>￥{{ item.user?item.user.money:'' }}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userType: "user", // 用户类型，可以是 'user' 或 'influencer'
				userGender: "famale", // 用户性别，可以是 'male' 或 'female'
				isSelected: 1,
				user: {},
				orderList: [],
				tablist: [{
						id: 1,
						name: "我的邀请",
					},
					{
						id: 2,
						name: "订单明细",
					},
				],
				tablist2: [{
						name: "全部",
					},
					{
						name: "今日",
					},
					{
						name: "昨日",
					},
					{
						name: "近7日",
					},
				],
				tablist1: [{
						id: null,
						name: "全部",
					},
					{
						id: 1,
						name: "今日",
					},
					{
						id: 2,
						name: "昨日",
					},
					{
						id: 3,
						name: "近7日",
					},
				],
				inviteParams: {
					type: '',
					page: 1
				},
				orderParams: {
					type: '',
					page: 1
				},
				total: 0,
				inviteList: [],
				orderList: [],
			};
		},
		onReachBottom() {
			if(this.isSelected==1){
				if(this.inviteList.length<this.total){
					this.inviteParams.page++
					this.getInvite(true)
				}
			}else{
				if(this.orderList.length<this.total){
					this.orderParams.page++
					this.getOrder(true)
				}
			}
		},
		onLoad() {
			this.rq.getData('spread/index').then(res => {
				this.user = res.data.list
			})
			this.getInvite()
		},
		methods: {
			getInvite(more) {
				this.rq.getData('spread/invite', this.inviteParams).then(res => {
					this.inviteList = more ? [...this.inviteList, res.data.data] : res.data.data
					this.total = res.data.total
				})
			},
			getOrder(more) {
				this.rq.getData('spread/order', this.orderParams).then(res => {
					this.orderList = more ? [...this.orderList, res.data.data] : res.data.data
					this.total = res.data.total
				})
			},
			golevel() {
				uni.navigateTo({
					url: "/subpages/translation/level/level",
				});
			},
			gojump() {
				uni.navigateTo({
					url: "/subpages/translation/translation-card/translation-card",
				});
			},
			clickService(item) {
				console.log(item.index)
				this.inviteParams.type = String(item.index)
				this.inviteParams.page = 1
				this.getInvite()
			},
			clickActivity(item) {
				this.orderParams.type = item.index ? item.index : ''
				this.orderParams.page = 1
				this.getOrder()
			},
			selectTab(id) {
				this.isSelected = id;
				if (id == 1) {
					this.inviteParams.page = 1
					this.getInvite()
				} else {
					this.orderParams.page = 1
					this.getOrder()
				}
			},
		},
	};
</script>
<style>
	page {
		background: linear-gradient(180deg, rgba(255, 118, 129, 0.28) 0%, #ffffff 49%);
		background-attachment: fixed;
	}
</style>
<style lang="scss" scoped>
	.pages {
		.top {
			.avator {
				position: relative;
				text-align: center;
				height: 80rpx;

				.nulls {
					width: 122rpx;
					height: 122rpx;
					border-radius: 50%;
					position: absolute;
					left: 42%;
					top: 40rpx;
				}

				.toux {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					position: absolute;
					left: 42%;
					top: 40rpx;
					box-sizing: border-box;
					border: 2rpx solid #333333;
					
				}

				p {
					position: absolute;
					width: 100%;
					text-align: center;
					top: 180rpx;
				}
			}

			.info {
				display: flex;
				justify-content: space-between;
				margin: 20rpx;
				text-align: center;
				height: 300rpx;
				border-radius: 8px;
				background: linear-gradient(180deg, #ffc3c8 0%, #ffa1aa 100%);

				.lef {
					position: absolute;
					left: 60rpx;
					top: 260rpx;
				}

				.rig {
					position: absolute;
					right: 60rpx;
					top: 260rpx;
				}

				.why {
					position: absolute;
					right: 60rpx;
					top: 120rpx;
				}
			}

			.tg {
				color: #ffffff;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 26rpx;
				top: 365rpx;

				.padd {
					text {
						background: #ff7883;
						display: flex;
						width: 210rpx;
						height: 76rpx;
						align-items: center;
						justify-content: center;
						border-radius: 50rpx;
						border: 8rpx solid #FFFFFF;
						box-sizing: border-box;
						font-size: 36rpx;
					}
				}
			}
		}

		.tabs {
			padding: 10rpx 0;

			.tabs-1 {
				display: flex;
				height: 50rpx;
				margin: 20rpx;
				align-items: center;
			}

			.tabs-2 {
				width: 140rpx;
				justify-content: center;
				align-items: center;
				display: flex;
				margin-right: 30rpx;
				font-family: PingFang SC;
				font-size: 15px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #333333;
			}

			.tabs-2.active {
				// position: relative;
				line-height: 15px;
				transition: all 0.3s ease;
				// border-radius: 22px;
				opacity: 1;
				// background: #ff7883;
				font-family: PingFang SC;
				font-size: 16px;
				font-weight: bold;
				letter-spacing: 0px;
				font-variation-settings: "opsz" auto;
				color: #000000;
				padding: 0 10rpx;
				height: 100%;
			}
			.tabs-1_xian{
				width: 60%;
				height: 6rpx;
				background-color: #ff7883;
				margin-top: 4rpx;
			}
			.tabs-icon {
				position: absolute;
				right: 40rpx;
				font-size: 20px;
			}
		}

		.invitation {
			padding: 10rpx 10rpx 20rpx 10rpx;
			margin: 10rpx 20rpx;
			border-radius: 10rpx;
			border-bottom: 1rpx solid #eeeeee;

			.cons {
				display: flex;
				justify-content: space-between;

				.yq {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.avator {
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 20rpx;
						}
					}

					.rig {
						.top {
							display: flex;
							align-items: center;

							.level {
								image {
									width: 30rpx;
									height: 30rpx;
									margin: 0 12rpx;
								}
							}

							.sex {
								padding: 5rpx 25rpx;
								background: #ffeeef;
								border-radius: 25rpx;
								display: flex;
								align-items: center;

								image {
									width: 25rpx;
									height: 25rpx;
									margin-right: 12rpx;
								}

								text {
									color: #ff7b86;
									font-size: 24rpx;
								}
							}
						}
					}
				}
			}

			.bots {
				display: flex;
				justify-content: space-evenly;
				align-items: center;

				.lft {
					display: flex;
					justify-content: space-between;
					align-items: center;

					p {
						padding: 3rpx 25rpx;
						background: #84e28c;
						border-radius: 25rpx;
						color: #ffffff;
						font-size: 26rpx;
						margin-right: 8rpx;
					}

					text {
						color: #ff7681;
					}
				}

				.rgs {
					display: flex;
					justify-content: space-between;
					align-items: center;

					p {
						padding: 3rpx 25rpx;
						background: #ff7681;
						border-radius: 25rpx;
						color: #ffffff;
						font-size: 26rpx;
						margin-right: 8rpx;
					}

					text {
						color: #ff7681;
					}
				}
			}
		}

		.invitation1 {
			padding: 10rpx;
			margin: 10rpx 20rpx;
			border-radius: 10rpx;

			.computs {
				color: #999999;

				span {
					color: #ff7681;
					padding: 0 5rpx;
				}
			}

			.dis {
				border-bottom: 1rpx solid #eeeeee;
				display: flex;
				justify-content: space-between;
				padding: 25rpx 0;

				&.user-bg {
					background-color: #84e28c;
				}

				&.influencer-bg {
					background-color: #ff7681;
				}

				.zuo {
					// width: 100%;

					.cons {
						display: flex;
						align-items: center;

						.avator {
							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
						}

						.rig {
							.top {
								display: flex;
								align-items: center;

								.level {
									image {
										width: 30rpx;
										height: 30rpx;
										margin: 0 12rpx;
									}
								}

								.sex {
									padding: 5rpx 25rpx;
									background: #ffeeef;
									border-radius: 25rpx;
									display: flex;
									align-items: center;

									image {
										width: 25rpx;
										height: 25rpx;
										margin-right: 12rpx;
									}

									text {
										color: #ff7681;
										font-size: 24rpx;
									}
								}
							}
						}


					}

					p {
						color: #999999;
						margin: 12rpx 0;
						font-size: 26rpx;
					}
				}

				.you {
					// margin-top: 50rpx;
					font-size: 26rpx;

					.user {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						text {
							color: #ff7681;
							margin-right: 8rpx;
						}

						p {
							padding: 3rpx 25rpx;
							border-radius: 25rpx;
							color: #ffffff;
							font-size: 26rpx;
						}
					}

					.gets {
						display: flex;
						align-items: center;
						// justify-content: center;
						color: #999999;

						p {
							color: #ff7681;
							margin-left: 8rpx;
						}
					}
				}

			}
		}
	}

	.user-text {
		padding: 3rpx 25rpx;
		background: #84e28c;
		border-radius: 25rpx;
		color: #ffffff;
		font-size: 26rpx;
	}

	.influencer-text {
		padding: 3rpx 25rpx;
		background: #ff7681;
		border-radius: 25rpx;
		color: #ffffff;
		font-size: 26rpx;
	}
</style>